<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="chart1" style="width: 800px; height: 450px;"></div>
<script>
    var myChart1 = echarts.init(document.getElementById('chart1'));
    var value = 0.48;
    var data = [value, value, value, value, value, ];
    var option1 = {
        // backgroundColor: '#fff',
        graphic: [{
            type: 'group',
            left: 'center',
            bottom: 10,
            children: [{
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
                style: {
                    fill: '#000',
                    text: '磁盘剩余空间：',
                    font: '16px Microsoft YaHei'
                }
            }, {
                type: 'text',
                z: 100,
                left: '120',
                top: 'middle',
                style: {
                    fill: '#000',
                    text: '128G',
                    font: '24px Microsoft YaHei'
                }
            }]
        }],
        series: [{
            type: 'liquidFill',
            radius: '70%',
            center: ['50%', '40%'],
            data: data,
            backgroundStyle: {
                borderWidth: 5,
                borderColor: '#1daaeb',
                color: '#fff'
            },
            label: {
                normal: {
                    formatter: (value * 100).toFixed(2) + '%',
                    textStyle: {
                        fontSize: 20
                    }
                }
            }
        }]
    };
    myChart1.setOption(option1);

</script>
</body>
</html>
